<template>
<div >
  <div id="filter-0" class="filter ">
        <div class="filter-title">更多榜单</div>
        <div class="select-bar">
            <div class="selects">
                <div class="select select-speciesItems ">
                    <div class="text text-speciesItems">榜单</div>
                    <div class="arrow grey-down "></div>
                </div>
                <div class="select select-timeItems ">
                    <div class="text text-timeItems">时间</div>
                    <div class="arrow grey-down "></div>
                </div>
                <div class="select select-areaItems ">
                    <div class="text text-areaItems">地区</div>
                    <div class="arrow grey-down "></div>
                </div>
                <div class="select select-categoryItems ">
                    <div class="text text-categoryItems">分类</div>
                    <div class="arrow grey-down "></div>
                </div>
                <div class="select select-sortItems ">
                    <div class="text text-sortItems">默认</div>
                    <div class="arrow grey-down "></div>
                </div>
            </div>
            <div class="options" style="display: none;"></div>
        </div>
    </div>
    <div class="main">
        <div class="board-list" v-for="(v,i) in arr" :key="i">
            <div class="content">
                <div class="title">
                    <div class="title-l">{{v.polyTitle}}</div>
                    <div class="title-r">
                        <span>全部</span>
                        <div class="arrow2"></div>
                    </div>
                </div>
                <ul class="swiper">
                    <li 
                    class="li1"
                    :class="{ bgColors:i==current}" 
                    v-for="(v,i) in arr[i].selectTermList" :key="i" 
                    @click="fun(i)">{{v.text}}</li>
                </ul>
                <ul class="movie-list">
                    <li class="li2" 
                    v-for="(v,i) in arr[i].movies" :key="i">
                        <div class="info">
                            <div class="poster">
                                <!-- <div class="poster-top"></div> -->
                                    <div class="rank">{{i+1}}</div>
                                    <img :src="v.img | fliterImg" alt="">
                                    <div class="mask"></div>
                                    <div class="score">
                                        <span>{{v.label.number}}</span>
                                        <span class="text1">
                                            {{v.label.text}}</span>
                                    </div>
                                
                            </div>
                            <span class="name">{{v.nm}}</span>

                        </div>
                    </li>
                </ul>
            </div>
        </div>




    </div>
</div>
    
</template>

<script>
import getLink from "@/api/getLink.js";

export default {
  data() {
    return {
      arr: [],
      current: 0
    };
  },
  mounted() {
    getLink("/api/aggregation3").then(res => {
      this.arr = res.data;
    });
  },
  methods: {
    fun(i) {
      this.current = i;
    }
  }
};
</script>

<style scoped>::-webkit-scrollbar {
     width: 0 !important;
   }

.bgColors{
  background: rgba(240, 61, 55, 0.1) !important;
  color: #f03d37 !important;
}
.filter {
  box-sizing: border-box;
  padding: 0.3rem;
  font-weight: 400;
  font-size: 0.26rem;
  line-height: 0.26rem;
  color: #333;
  letter-spacing: 0;
  position: relative;
  background-color: #fff;
  z-index: 10;
  background-image: linear-gradient(180deg, #fff, #f1f1f1);
  position: sticky;
  top: 0.84rem;
}
.filter-title {
  letter-spacing: 0;
  font-weight: 500;
  font-size: 0.34rem;
  color: #333;
  line-height: 0.34rem;
}
.select-bar {
  margin: 0.3rem 0 0;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.selects {
  width: 100%;
}
.select {
  box-sizing: border-box;
  border-radius: 1rem;
  display: inline-flex;
  align-items: center;
  padding: 0 0.1rem;
  position: relative;
  margin-right: 0.1rem;
  flex-shrink: 0;
  color: #333;
  width: 1.2rem;
  margin-left: 0;
}
.text {
  display: inline-block;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  word-break: break-all;
  width: 0.8rem;
  text-align: right;
}
.arrow {
  display: inline-block;
  margin-left: 0.06rem;
  width: 0.1rem;
  height: 0.08rem;
  background: url(//s0.meituan.net/bs/myfe/canary/file/asgard/images/board/arrow-grey-down.png)
    no-repeat;
  background-size: 100% 100%;
}

.board-list {
  border-radius: 0.24rem;
  width: 95%;
  position: relative;
  color: #fff;
  background-position: 0 100%;
  /* margin-bottom: .2rem; */
  background-color: #fff;
  height: 4.98rem;
  margin: 0 auto;
  margin-bottom: 0.2rem;
}
.content {
  list-style: none;
  color: #fff;
  z-index: 3;
  padding: 0.4rem 0;
  border-radius: 0.16rem;
}
.title {
  font-size: 0.34rem;
  line-height: 0.34rem;
  font-weight: 500;
  font-family: PingFangSC-Medium;
  color: #333;
  letter-spacing: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-right: 0.26rem;
  padding-left: 0.26rem;
}
.title-l {
  font-size: 0.34rem;
  line-height: 0.34rem;
  font-weight: 500;
  font-family: PingFangSC-Medium;
  color: #333;
  letter-spacing: 0;
  display: flex;
  align-items: center;
}
.title-r {
  list-style: none;
  letter-spacing: 0;
  font-weight: 400;
  font-family: PingFangSC-Regular;
  font-size: 0.22rem;
  color: #666;
  line-height: 0.22rem;
}
.title-r span {
  -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
  font: 14px/1.5 Arial, Helvetica, sans-serif;
  list-style: none;
  letter-spacing: 0;
  font-weight: 400;
  font-family: PingFangSC-Regular;
  font-size: 0.22rem;
  color: #666;
  line-height: 0.22rem;
}
.swiper {
  color: #fff;
  list-style: none;
  margin: 0;
  padding: 0;
  width: 100%;
  display: inline-block;
  white-space: nowrap;
  margin-top: 0.3rem;
  overflow-x: scroll;
  overflow-y: hidden;
}
.li1 {

  display: inline-block;
  box-sizing: border-box;
  padding: 0 0.26rem;
  height: 0.5rem;
  background: #f5f5f5;
  border-radius: 0.25rem;
  font-weight: 400;
  font-size: 0.22rem;
  color: #666;
  letter-spacing: 0;
  line-height: 0.5rem;
  text-align: center;
  margin-left: 0.16rem;
}.movie-list{
      
    /* margin-top: .3rem; */
    font-weight: 500;
    font-family: PingFangSC-Medium;
    font-size: .22rem;
    color: #fff;
    letter-spacing: 0;
    overflow: hidden;
    white-space: nowrap;
    overflow-x: scroll;
    vertical-align: middle;
    box-sizing: border-box;
    width: 100%;
}
.li2{
    font-size: .22rem;
 
    letter-spacing: 0;
    white-space: nowrap;
    list-style: none;
    margin: 0;
    padding: 0;
    display: inline-block;
    margin-right: .18rem;
    margin-left: .26rem;
}
.info{

    margin-bottom: .12rem;
    display: flex;
    /* justify-content: start; */
    flex-direction: column;
}
.poster{

    display: flex;
    /* justify-content: start; */
    align-items: center;
    margin-bottom: .16rem;
    position: relative;
    width: 1.6rem;
    height: 2.26rem;
    border-radius: .14rem;
    box-shadow: 0 1px 5px 0 rgba(129,114,114,.2);
}
.info .name{
 
    list-style: none;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    word-break: break-all;
    width: 1.6rem;
    color: #333;
    font-size: .26rem;

}
.rank{
     
    font-size: .22rem;
    letter-spacing: 0;
    white-space: nowrap;
    list-style: none;
    position: absolute;
    width: .46rem;
    height: .52rem;
    top: -.04rem;
    left: .14rem;
    text-align: center;
    line-height: .52rem;
    background: url(//s0.meituan.net/bs/myfe/canary/file/asgard/images/board/rank-top-three.png) no-repeat;
    background-size: contain;
    color: #fffac0;
    text-shadow: 0 .04rem .06rem #947129;
}
.mask{
     
    font-family: PingFangSC-Medium;
    font-size: .22rem;
    color: #fff;
    letter-spacing: 0;
    white-space: nowrap;
    list-style: none;
    position: absolute;
    top: 0;
    bottom: 0;
    z-index: 1;
    width: 100%;
    border-radius: .14rem;
    background-image: linear-gradient(180deg,rgba(29,29,29,0) 68%,#1d1d1d);
}
.poster img{
    list-style: none;
    border: 0;
    display: inline-block;
    background: none;
    border-radius: .14rem;
    width: 100%;
    height: 100%;
}
.score{
    list-style: none;
    color: #ffa016;
    position: absolute;
    bottom: .1rem;
    left: .12rem;
    font-size: .22rem;
    vertical-align: middle;
    line-height: 1;
    z-index: 2;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    word-break: break-all;
    width: 1.36rem;
}
.score .text1{
    list-style: none;
    color: #ffa016;
    line-height: 1;
    white-space: nowrap;
    word-break: break-all;
    margin-left: .04rem;
    font-size: .18rem;
}
.arrow2{
    color: #666;
    line-height: .22rem;
    border: solid #666;
    border-width: 0 1px 1px 0;
    display: inline-block;
    padding: .04rem;
    margin-left: .04rem;
    margin-bottom: .04rem;
    /* -webkit-transform: rotate(-45deg); */
    transform: rotate(-45deg);
}
</style>
